<template>
  <div class="home">
    <!-- 使用 router-link 并给它们添加类，使其显示为按钮 -->
    <router-link to="/home/userList" class="button">用户管理</router-link>
    <router-link to="/home/dishList" class="button">菜品管理</router-link>
    <router-link to="/home/orderList" class="button">订单管理</router-link>

    <!-- 显示路由的内容 -->
    <router-view/>
  </div>
</template>

<script>
import UserList from "../components/UserList.vue"
import DishList from "../components/DishList.vue"
import OrderList from "../components/OrderList.vue"
export default {
  name: 'HomeView',
  components: {
    UserList,
    DishList,
    OrderList
  }
}
</script>

<style scoped>

.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  background-color: #007bff; 
  color: white; 
  text-align: center;
  text-decoration: none; 
  border-radius: 5px; 
  font-size: 16px; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  transition: background-color 0.3s, transform 0.3s; 
}

.button:hover {
  background-color: #0056b3; 
  transform: translateY(-2px); 
}

.button:active {
  background-color: #004085; 
  transform: translateY(0); 
}
</style>
